<template>
  <NavBar
    :title="title"
    :leftArrow="false" />

  <div class="body">
    <div class="swiper-container">
      <swiper
        class="swiper"
        circular
        :indicator-dots="false"
        :autoplay="false"
        next-margin="32px">
        <swiper-item
          v-for="item in swiperList"
          :key="item.id">
          <view class="swiper-item">
            <image
              :src="item.imgUrl"
              mode="aspectFill" />
          </view>
        </swiper-item>
      </swiper>
    </div>
    <div
      class="module"
      @click="toCommunity"
      :style="{
        height: postHome ? '300px' : 'auto',
      }">
      <div class="feature">
        <div class="text">社区</div>
        <div class="enter">
          <image
            src="@/static/icon/right_arrow.svg"
            mode="scaleToFill" />
        </div>
      </div>
      <div
        class="pic"
        v-if="postHome">
        <image
          :src="postHome ? postHome.imgUrl : ''"
          mode="aspectFill" />
      </div>
      <div
        class="title"
        v-if="postHome">
        {{ postHome ? postHome.title : "" }}
      </div>
    </div>
    <div
      class="module"
      :style="{
        height: knowledgeHome ? '300px' : 'auto',
      }"
      @click="toKnowledge">
      <div class="feature">
        <div class="text">科普</div>
        <div class="enter">
          <image
            src="@/static/icon/right_arrow.svg"
            mode="scaleToFill" />
        </div>
      </div>
      <div
        class="pic"
        v-if="knowledgeHome">
        <image
          :src="knowledgeHome ? knowledgeHome.imgUrl : ''"
          mode="aspectFill" />
      </div>
      <div
        class="title"
        v-if="knowledgeHome">
        {{ knowledgeHome ? knowledgeHome.name : "" }}
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from "../../components/NavBar/NavBar.vue";
import { getAllPlants, getKnowledgePlants } from "../../api/plant.js";
import { getAllPosts } from "../../api/post.js";

import { globalParams } from "../../../public/config.js";

export default {
  components: {
    NavBar,
  },
  data() {
    return {
      text: "hello",
      title: "首页",
      plantsData: [],
      postData: [],
    };
  },
  computed: {
    // 轮播图数据
    swiperList() {
      return this.plantsData.map((item) => {
        return item;
      });
    },
    // 首页展示最热帖子
    postHome() {
      let max = this.postData[0];
      this.postData.forEach((item) => {
        if (item.likes > max.likes) {
          max = item;
        }
      });
      return max;
    },
    // 科普首页数据
    knowledgeHome() {
      let index = this.getRandomInt(0, this.plantsData.length - 1);
      console.log("随机数", index);
      return this.plantsData[index];
    },
  },

  created() {
    this._getKnowledgePlants();
    this._getAllPosts();
  },
  onShow() {
    this._getKnowledgePlants();
    this._getAllPosts();
  },
  methods: {
    // 跳转到社区页面
    toCommunity() {
      console.log("跳转到社区页面");
      uni.navigateTo({
        url: "/pages/community/community?type=community&title=社区",
      });
    },
    // 跳转到科普页面
    toKnowledge() {
      console.log("跳转到科普页面");
      uni.navigateTo({
        url: "/pages/community/community?type=knowledge&title=科普",
      });
    },

    // 获取所有植物数据
    async _getKnowledgePlants() {
      const { data: res } = await getKnowledgePlants();
      console.log("获取所有植物数据", res);
      if (res.code === 200) {
        this.plantsData = res.data;
        this.plantsData = this.plantsData.map((item) => {
          item.imgUrl = globalParams.baseUrl + item.imgUrl;
          return item;
        });
        console.log("轮播图数据", this.plantsData);
      }
    },
    // 获取所有帖子数据
    async _getAllPosts() {
      const { data: res } = await getAllPosts();
      console.log("获取所有帖子数据", res);
      if (res.code === 200) {
        this.postData = res.data;
        this.postData = this.postData.map((item) => {
          item.imgUrl = globalParams.baseUrl + item.imgUrl;
          return item;
        });
        console.log("帖子数据", res.data);
      }
    },

    // 生成随机数[min,max)
    getRandomInt(min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min + 1)) + min;
    },
  },
};
</script>

<style lang="scss" scoped>
.body {
  display: flex;
  align-items: center;
  flex-direction: column;
  :nth-child(3) {
    margin-bottom: 16px;
  }
}
.body::-webkit-scrollbar {
  display: none;
}

::v-deep .swiper {
  height: 200px !important;
}

.swiper-container {
  width: 100%;
  height: 200px;
  border-radius: 12px;
  box-shadow: 0px 4px 16px 0px #edeef0;
  margin-top: 16px;
  .swiper-item {
    height: 200px;
    margin: 0 8px;
    image {
      width: 100%;
      height: 200px;
      border-radius: 12px;
    }
  }
}
.module {
  margin: 16px 16px 0 16px;
  width: 94%;
  height: 300px;
  background-color: #ffffff;
  box-shadow: 0px 4px 16px 0px #edeef0;
  border-radius: 12px;
  .feature {
    display: flex;
    justify-content: space-between;
    margin: 16px;
    .text {
      font-size: 22px;
      font-weight: bold;
      color: #333;
    }
    .enter {
      width: 20px;
      height: 20px;
      image {
        height: 100%;
        width: 100%;
      }
    }
  }
  .pic {
    height: 192px;
    margin: 16px 16px 0 16px;
    border-radius: 12px;

    image {
      height: 100%;
      width: 100%;
      border-radius: 12px;
    }
  }
  .title {
    margin: 12px 16px 0 16px;
    font-size: 16px;
    font-weight: bold;
  }
}
</style>
